<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href="./css/index.css" rel="stylesheet">
  <style>
    h1 {
      color: #000;
    }

    svg {
      min-width: 600px;
      min-height: 300px;
      overflow: auto;
    }
  </style>
</head>
<body>
<h1>SVG Stroke</h1>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none">
    <path stroke="red" d="M5,20 l300,0" />
    <path stroke="blue" d="M5,40 l300,0" />
    <path stroke="black" d="M5,60 l300,0" />
  </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black" stroke-width="6">
    <path stroke-linecap="butt" d="M10,20 l215 0" />
    <path stroke-linecap="round" d="M10,40 l215 0" />
    <path stroke-linecap="square" d="M10,60 l215 0" />
  </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black" stroke-width="1">
    <path stroke-dasharray="1,1" d="M5 20 l215 0" />
    <path stroke-dasharray="10,10" d="M5 40 l215 0" />
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
  </g>
</svg>
<!--<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>-->
<script src="./js/d3.v4.min.js"></script>
<script src="./js/svg.js"></script>
</body>
</html>